<template>
  <template v-if="storageStore.docsApis.length">
    <el-card class="origin-card" v-for="(item, index) in storageStore.docsApis" :key="item.origin">
      <template #header>
        <div class="origin-card__header">
          <span class="origin-card__header--title">{{ item.title }}</span>
          <span class="origin-card__header--tool" @click="onRemove(index)">移除</span>
        </div>
      </template>
      <div>
        <a :href="item.origin" target="_blank" class="origin-card__origin--href" title="点击前往">
          {{ item.origin }}{{ item.pathname }}
        </a>
      </div>
    </el-card>
  </template>
  <el-card class="origin-card">
    <template #header>
      <div class="origin-card__header">
        <span class="origin-card__header--title">添加 swagger 地址</span>
      </div>
    </template>
    <el-form ref="formRef" :model="formState" label-width="45px">
      <el-form-item label="title" prop="title" :rules="titleRules">
        <el-input
          clearable
          v-model="formState.title"
          type="text"
          autocomplete="off"
          maxlength="15"
        />
      </el-form-item>
      <el-form-item label="href" prop="url" :rules="docsApiRules">
        <el-input clearable v-model="formState.url" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
import type { FormItemRule } from 'element-plus'
import { storageStore } from '@shared/context'
import axios from 'axios'
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  name: 'Swagger2dtsApp',
  setup() {
    const formRef = ref()

    const formState = reactive({
      title: '',
      url: ''
    })

    const titleRules: FormItemRule[] = [{ required: true, message: '请输入标题' }]

    const docsApiRules: FormItemRule[] = [
      { required: true, type: 'url', message: '请输入有效的地址' },
      {
        validator(rule, value: string, cb) {
          const item = storageStore.docsApis.find(({ origin }) => value.includes(origin))
          if (item) {
            cb(new Error(`域名 ${item.origin} 已存在，请勿重复添加`))
          } else {
            axios.get(value).then(({ data }) => {
              if (data.openapi) cb()
              else cb(new Error('该地址无法获取 swagger 对象数据'))
            }, cb)
          }
        }
      }
    ]

    function onSubmit() {
      formRef.value?.validate((valid: boolean) => {
        if (valid) {
          const { title, url } = formState
          const { origin, pathname } = new URL(url)
          storageStore.docsApis.push({ title, origin, pathname })
          formRef.value?.resetFields()
        }
      })
    }

    function onRemove(index: number) {
      storageStore.docsApis.splice(index, 1)
    }

    return { storageStore, formRef, formState, titleRules, docsApiRules, onSubmit, onRemove }
  }
})
</script>

<style lang="scss">
.origin-card {
  margin: 10px auto;
}

.origin-card__header {
  display: flex;
  flex-wrap: nowrap;
}

.origin-card__header--tool {
  color: #67c23a;
  cursor: pointer;
  margin-left: auto;
}

.origin-card__origin--href {
  text-decoration: none;

  &:link,
  &:active,
  &:visited {
    color: #909399;
  }

  &:hover {
    color: #606266;
  }
}
</style>
